<template>
    <div>
        <page-main>
            <!-- 批量操作 -->
            <div style="margin-bottom: 20px;">
                <el-button type="primary" size="small" @click="add(null)">新建</el-button>
            </div>
            <!-- 表格 table -->
            <el-table ref="table" v-loading="loading" :data="dataList" border stripe highlight-current-row>
                <el-table-column prop="" label="序号" width="60px">
                    <template #default="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="规则名称">
                    <template #default="scope">
                        <span @click="detail(scope.row)">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="分配方式">
                    <template #default="scope">
                        <span>{{ scope.row.fenpei_type | typeFilter }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="city" label="城市" />
                <el-table-column prop="status" label="规则状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.status" active-value='1' inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="(e)=>statusChange(e,scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column prop="created" label="创建时间" />
                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="merchant(scope.row)">门店配置</el-button>
                        <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </page-main>
        <!-- 新建规则 -->
        <add-rule-dialog ref="addRuleDialog" @success="getList" />
        <!-- 门店配置 -->
        <merchant-list-drawer ref="merchantListDialog" @success="getList" />
    </div>
</template>
<script>
import { deptRuleList, saveDeptRule, delDeptRule } from '@/api/merchantPool'
import AddRuleDialog from './components/AddRuleDialog'
import MerchantListDrawer from './components/MerchantListDrawer'
export default {
    components: {
        AddRuleDialog,
        MerchantListDrawer
    },
    filters: {
        typeFilter(val) {
            const map = {
                1: '按顺序分配',
                2: '按权重分配'
            }
            return map[val] || '--'
        }
    },
    data() {
        return {
            loading: false,
            drawerVisible: false,
            id: '',
            info: {},
            dataList: []
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            this.loading = true;
            deptRuleList({pool_id: this.id}).then(res => {
                this.dataList = res.data.list;
                this.loading = false;
            })
        },
        add() {
            this.$refs.addRuleDialog.showDialog(); 
        },
        merchant(item) {
            this.$refs.merchantListDialog.showDrawer(item); 
        },
        statusChange(e, item) {
            item.status = e;
            saveDeptRule(item).then(res => {
                if (res.status == '1') {
                    this.$message.success('状态修改成功！')
                    this.getList();
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        // 删除
        del(id) {
            this.$alert('确定将该规则删除？', '提示', {
                confirmButtonText: '确定',
                showCancelButton: true,
                callback: action => {
                    if (action == 'confirm') {
                        const params = {
                            id
                        }
                        delDeptRule(params).then(res => {
                            if (res.status) {
                                this.getList();
                                this.$message({ type: 'success', message: '操作成功！'});
                            }
                        })
                    }
                }
            });
        }
    }
}
</script>
